import 'package:flutter/material.dart';
import 'package:todo_list/components/base/neu_box.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey[350],
        body: const SafeArea(
            child: Center(
          child: NeuBox(
            width: null,
            padding: EdgeInsets.all(4),
            margin: EdgeInsets.symmetric(horizontal: 45),
            child: MyTabBar(
              tags: ["登录", "注册"],
              views: [LoginTag(), RegisterTag()],
            ),
          ),
        )),
      ),
    );
  }
}

class MyTabBar extends StatefulWidget {
  final List<String> tags;
  final List<Widget> views;

  const MyTabBar({
    Key? key,
    required this.tags,
    required this.views,
  }) : super(key: key);

  @override
  State<MyTabBar> createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> {
  int current = 0;

  static const TextStyle selectedTextStyle =
      TextStyle(fontSize: 17, color: Colors.black87);
  static const TextStyle normalTextStyle =
      TextStyle(fontSize: 16, color: Colors.white);
  static BoxDecoration selectedBoxDecoration = BoxDecoration(
      color: Colors.white.withOpacity(0.8),
      borderRadius: BorderRadius.circular(8));

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: Column(
        children: [
          SizedBox(
            height: 40,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: widget.tags
                  .asMap()
                  .entries
                  .map((e) => Expanded(
                        child: Container(
                          height: 40,
                          decoration:
                              e.key == current ? selectedBoxDecoration : null,
                          child: InkWell(
                            onTap: () => {
                              setState(() => {current = e.key})
                            },
                            child: Center(
                              child: Text(
                                e.value,
                                style: e.key == current
                                    ? selectedTextStyle
                                    : normalTextStyle,
                              ),
                            ),
                          ),
                        ),
                      ))
                  .toList(),
            ),
          ),
          const SizedBox(height: 5),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: widget.views[current],
          )
        ],
      ),
    );
  }
}

class LoginTag extends StatefulWidget {
  const LoginTag({Key? key}) : super(key: key);

  @override
  State<LoginTag> createState() => _LoginTagState();
}

class _LoginTagState extends State<LoginTag> {

  String _account = '';
  String _pwd = '';
  final _formKey = GlobalKey<FormState>();

  void login(String account, String pwd) {
    print("$account, $pwd");
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: const InputDecoration(hintText: '输入账号'),
            onSaved: (value) {
              _account = value ?? "";
            },
            validator: (String? value) {
              value = value ?? "";
              return value.length >= 6 ? null : '账号最少6个字符';
            },
          ),
          TextFormField(
            decoration: const InputDecoration(hintText: '输入密码'),
            obscureText: true,
            onSaved: (value) {
              _pwd = value ?? "";
            },
            validator: (String? value) {
              value = value ?? "";
              return value.length >= 6 ? null : '账号最少6个字符';
            },
          ),
          RaisedButton(
            child: const Text('登录'),
            onPressed: () {
              var state = Form.of(context);
              if (state != null && state.validate()) {
                state.save();
                login(_account, _pwd);
              }
            },
          )
        ],
      ),
    );
  }
}


class RegisterTag extends StatelessWidget {
  const RegisterTag({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("注册"),
    );
  }
}
